<!--
 * @Author: your name
 * @Date: 2021-08-16 15:56:16
 * @LastEditTime: 2021-08-23 12:18:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \orderSystems\src\views\menuMag\SpecificationMag.vue
-->
<template>
  <div id="specification-mag">
    <!-- 规格管理 -->
    <!-- 查询部分 -->
    <Search :moudleName="tableName" @shareSearchStatus="shareSearchStatus"></Search>
    <!-- 表格数据部分 -->
    <div class="table-box">
      <DishTable
        :moudleName="tableName"
        :tableType="tableType"
        :tableDatas="tableData"
        :clickNowPage="page"
        :pageCount="pageSize"
        :nowPageSize="nowTotalSize"
        @shareData="shareData"
      ></DishTable>
      <!-- 分页部分 -->
      <Pagination :totalCount="allCount" @shareData="shareData"></Pagination>
    </div>
  </div>
</template>

<script>
import Search from "./search.vue";
import DishTable from "./DishTable.vue";
import Pagination from "@/components/common/Pagination";
export default {
  components: {
    Search,
    DishTable,
    Pagination,
  },
  data() {
    return {
      tableName: "规格", //模块名字
      tableType: "规格名称", //表格数据的表头内容
      tableData: [], //表格需要渲染的数据
      page: 1, //分页页码
      pageSize: 5, //每页展示数据条数
      allCount: 0, //总数据条数
      nowTotalSize: 0, //当前页实际数据数量
      flag:false,//查询的标志变量，false表示没查询
      name:'',//查询的名字
    };
  },
  created(){
    this.getSecificationMagSearchInfo(this.name,this.page, this.pageSize)
  },
  methods: {
    /**
     * @description: 使用查询功能时，子传父触发的事件
     * @param {*} v 从search子组件接收的数据
     * @return {*}
     */    
    shareSearchStatus(v){
      this.tableData=v.tableData;//查询的数据
      this.flag=v.searchStatus;//代表查询的状态标志
      this.allCount=v.totalCount;//查询的总条数
      this.name=v.name;//查询的名字
    },
    /**
     * @description: 表格子组件和分页子组件向父组件传值触发的函数
     * @param {*} v 传给父组件值 是一个对象
     * @return {*}
     */
    shareData(v) {
      this.page = v.nowPage; //当前页
      this.pageSize = v.pageCount; //当前页数据条数
      //  if(this.flag){//使用查询功能时，渲染的表格数据
        // console.log('xxxxxx');
        this.getSecificationMagSearchInfo(this.name,this.page,this.pageSize)
      /* }else{//没有使用查询功能时，渲染表格的数据
        this.getSecificationMagInfo(this.page, this.pageSize); //更新表格数据
      } */
       
    },
    /**
     * @description: 获取当前页的数据函数
     * @param {*} page 当前页码
     * @param {*} pageSize  显示数据条数
     * @return {*}
     */
   /*  async getSecificationMagInfo(page, pageSize) {
      const { data: res } = await this.axios.post("/dishSpecification/list", {
        page: page,
        pageSize: pageSize,
      });
      // console.log(res);
      if (res.code == 200) {
        this.tableData = res.data; //将表格数据存入tableData数组中，并通过父传子传给table子组件
        this.allCount = res.count; //接收总数据条数
        console.log(res.data);
        //将表格里的属性名specification修改为表格数据中定义的名字
        this.tableData= JSON.parse(JSON.stringify(this.tableData).replace(/specification/g,"category"));
        this.nowTotalSize = res.data.length; //当前点击页的数据条数
        // console.log('当前页数据xxx',this.nowTotalSize);
        // console.log(this.allCount);
        // console.log('父组件接收到的后台表格数据',this.tableData);
      }
    }, */
    /**
     * @description: 使用查询功能时获取当前页的数据函数
     * @param {*} name 查询名字
     * @param {*} page 当前页码
     * @param {*} pageSize  显示数据条数
     * @return {*}
     */
    async getSecificationMagSearchInfo(name,page, pageSize) {
      const { data: res } = await this.axios.post("/dishSpecification/list", {
        name:name,
        page: page,
        pageSize: pageSize,
      });
      // console.log(res);
      if (res.code == 200) {
        this.tableData = res.data; //将表格数据存入tableData数组中，并通过父传子传给table子组件
        this.allCount = res.count; //接收总数据条数
        console.log(res.data);
        //将表格里的属性名taste修改为表格数据中定义的名字
        this.tableData= JSON.parse(JSON.stringify(this.tableData).replace(/specification/g,"category"));
        this.nowTotalSize = res.data.length; //当前点击页的数据条数
        // console.log('当前页数据xxx',this.nowTotalSize);
        // console.log(this.allCount);
        // console.log('父组件接收到的后台表格数据',this.tableData);
      }
    },
  },
};
</script>

<style lang='less' scoped>
.table-box {
  margin-top: 1.5rem;
  border: 0.1rem solid #dbe0e9;
  background-color: #fff;
}
</style>